<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var i = 1;
			var timer ;
			var obj;
			var alla;
			function changeImg(){
				obj = document.getElementById("img1");
				alla = document.getElementsByTagName("a");
				
				if(i==5){
					i = 1;
				}else{
					i++;
				}
				
				for(var j=0;j<alla.length;j++){
					alla[j].style.color = "blue";
				}
				alla[i-1].style.color = "red";

				obj.src = "../img/" + i+".jpg";
				
				timer = setTimeout("changeImg()",1000);
			}
			
			function stopTimer(num){
				// 第一步:将定时器停止
				clearTimeout(timer);
				// 第二步:获取到你的是第几个a标签,然后将图片定位到这个数上
				obj.src = "../img/"+num+".jpg";
				// 第三步:获取到你的是第几个a标签,然后将颜色变为红色
				for(var j=0;j<alla.length;j++){
					alla[j].style.color = "blue";
				}
				alla[num-1].style.color = "red";
				// 第四步:将i的值定位到num
				i = num;
			}
			
			function beginTimer(){
				timer = setTimeout("changeImg()",1000);
			}
		</script>
	</head>
	<body onload="changeImg()">
		<table border="1" align="center" width="780" height="480">
			<tr height="450">
				<td>
					<img src="../img/1.jpg" width="780" height="450" id="img1" />
				</td>
			</tr>
			<tr>
				<td align="right">
					<a href="#" onmouseover="stopTimer(1)" onmouseout="beginTimer()">1</a>
					<a href="#" onmouseover="stopTimer(2)" onmouseout="beginTimer()">2</a>
					<a href="#" onmouseover="stopTimer(3)" onmouseout="beginTimer()">3</a>
					<a href="#" onmouseover="stopTimer(4)" onmouseout="beginTimer()">4</a>
					<a href="#" onmouseover="stopTimer(5)" onmouseout="beginTimer()">5</a>
				
					&nbsp;&nbsp;&nbsp;
				</td>
			</tr>
		</table>
	</body>
</html>
